<template>
  <div>
    <Drawer
      v-model:visible="visible"
      :destroyOnClose="true"
      class="custom-class"
      placement="right"
      title="接口详情"
      width="100%"
    >
      <div class="md:flex bg-gray-100 rounded-2xl">
        <div class="md:w-2/5 md:mr-5 ml-10 my-10">
          <ChartCard
            :name="nameArray"
            :series="seriesArray"
            :x="xArray"
            class="md:h-85"
            title="接口调用图表"
          ></ChartCard>
          <div class="md:my-10"></div>
          <ChartCard :name="nameArray" :series="seriesArray" :x="xArray" class="md:h-85" title="租户趋势表"></ChartCard>
        </div>
        <div class="md:w-3/5 md:ml-5 mr-10 my-10">
          <ChartCard
            :name="nameArray"
            :series="seriesArray"
            :x="xArray"
            class="md:h-180"
            title="租户占比表"
          ></ChartCard>
        </div>
      </div>
      <div class="md:my-10">
        <Divider></Divider>
      </div>
      <div class="absolute bottom-10 right-8">
        <Button style="margin-right: 8px; font-weight: bolder" @click="onClose">取消</Button>
        <Button style="font-weight: bolder" type="primary" @click="onClose">确定</Button>
      </div>
    </Drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Button, Divider, Drawer } from 'ant-design-vue';
import { getApiDetail, getTenantDetail } from '/@/api/measurement-center/function-statistic/functionStatistic';
import ChartCard from '/@/views/measurement-center/function-statistic/component/chartCard.vue';

const visible = ref(false);
const basicData = ref([]);
const xArray = ref([]);
const seriesArray = ref([]);
const nameArray = ref([]);

const getBasicData = async (params: any) => {
  if (params.apiId !== undefined) {
    basicData.value = await getApiDetail(params);
  } else {
    basicData.value = await getTenantDetail(params);
  }
};
const openDrawer = (params) => {
  getBasicData(params).then(() => {
    let x = [];
    let series = [];
    let nameList = [];
    let map = new Map<string, number>();
    basicData.value.forEach((res) => {
      if (x === null || !x.includes(res.recordDate)) {
        x.push(res.recordDate);
      }
      if (params.apiId) {
        if (map === null || !map.has(res.tenantName)) {
          nameList.push(res.tenantName);
          let array = [];
          array.push(res.counts);
          series.push(array);
          map.set(res.tenantName, series.length - 1);
        }
        series.at(map.get(res.tenantName)).push(res.counts);
      } else {
        if (map === null || !map.has(res.uri)) {
          nameList.push(res.uri);
          let array = [];
          array.push(res.counts);
          series.push(array);
          map.set(res.uri, series.length - 1);
        }
        series.at(map.get(res.uri)).push(res.counts);
      }
    });
    series.forEach((res) => {
      res.splice(0, 1);
    });
    xArray.value = x;
    seriesArray.value = series;
    nameArray.value = nameList;
    visible.value = true;
  });
};

const onClose = () => {
  visible.value = false;
};
defineExpose({ openDrawer });
</script>
